<template>
	<view>
		<!-- 评论 -->
		<view class="comment-view">
			<text class="comment-title">动态评论</text>
			<view class="comment-body">
				<view class="comment-item" v-for="(item,index) in firstList" :key="index">
					<view class="comment-item-title">
						<image class="comment-item-title-photo" :src="item.member.eperAccount.eperAvatarImg?item.member.eperAccount.eperAvatarImg:defaultAvatar"></image>
						<view class="comment-item-title-view">
							<text class="comment-item-title-text1">
								{{item.member.eperAccount.eperUsername}}
							</text>
							<text :class="[item.isPraise?'comment-item-title-text5':'comment-item-title-text3']" @click="praised(item,index)">
							</text>
						</view>
						<view class="comment-item-title-view">
							<text class="comment-item-title-text2">{{item.createdDate}}</text>
							<text class="comment-item-title-text4" style="float: right;">{{item.praiseQuantity}}</text>
						</view>
					</view>
					<view class="comment-item-body" @click="clickedComment(item)">
						{{item.content}}
					</view>
					<view class="comment-item-reply" v-if="secendList[index]">
						<view class="comment-item-reply-item" v-for="(cItem,cIndex) in secendList[index].content" :key="cIndex">
							<image class="reply-photo" :src="cItem.member.eperAccount.eperAvatarImg?cItem.member.eperAccount.eperAvatarImg:defaultAvatar"></image>
							<view class="comment-item-title-view">
								<text class="comment-item-title-text1">{{cItem.member.eperAccount.eperUsername}}</text>
								<text class="comment-item-title-text2" :class="{'hidden':item.id == cItem.parentComment.commentId}">
									回复
								</text>
								<text class="comment-item-title-text1" :class="{'hidden':item.id == cItem.parentComment.commentId}">
									{{cItem.parentComment.userName}}
								</text>
								<text class="comment-item-title-text3" :class="[cItem.isPraise?'comment-item-title-text5':'comment-item-title-text3']"
								 @click="praised(cItem,index,cIndex)">
								</text>
							</view>
							<view class="comment-item-title-view">
								<text class="comment-item-title-text2">{{cItem.createdDate}}</text>
								<text class="comment-item-title-text4" style="float: right;">{{cItem.praiseQuantity}}</text>
							</view>
							<view class="comment-item-body" @click="clickedComment(cItem)">
								{{cItem.content}}
							</view>
						</view>
					</view>
					<view class="comment-item-bottom">
						<text @click="hiddenReplyComment(index)" class="comment-item-bottom-text1" :class="{'hidden':!secendList[index]}">
							收起
						</text>
						<text   v-if="firstList[index].replyQuantity != 0 " @click="getReplyComment(item.id,index)" class="comment-item-bottom-text2" :class="{'hidden':secendList[index]&&secendList[index].content.length>=item.replyQuantity}">
							展开查看回复
						</text>
					</view>
					<view style="margin-left:40px;border-bottom: solid rgba(238,238,238,1) 1px;"></view>
				</view>  
			</view>
			<view>
				<load :contentText="loadingText" :status="loadingStatus"></load>
			</view>
		</view>
		<view class="bottom-fixed">
			<input class="bottom-input" :class="{'isFocus':inputIsFocus}" @focus="isFocus" @blur="isBlur" :focus="focusByReply"
			 v-model="commentContent" :placeholder="placeholder?placeholder:'我来说一说~'" placeholder-class="comment-input-placeholder" />
			<label @click.stop="submitComment" class="comment-submit-fixed" :class="{'hidden':!inputIsFocus}">
				发送
			</label>
			<view class="bottom-flex" :class="{'hidden':inputIsFocus}">
				<text :class="[isFavorite?'bottom-text4':'bottom-text1']" @click="dynamicPraised()">{{praiseNum}}</text>
				<text class="bottom-text2">{{replyNum}}</text>
				<text @tap="GoShare()" class="bottom-text3">分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import load from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		props: ['id','dynamicData','index'],
		components: {
			load
		},
		data() {
			return {
				inputIsFocus: false,
				firstList: [],
				firstListPageNumber: 0,
				pageSize: 10,
				secendList: [],
				commentContent: '',
				loadingStatus: 'noMore',
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多评论内容了"
				},
				focusByReply: false,
				placeholder: '',
				replyItem: {},
				defaultAvatar: '/static/icon/default_avatar.png',

				praiseNum: 0, //底部点赞数量
				replyNum: 0, //底部回复数量
				isFavorite: false,
				isCreator: false,
				isFollow: false,
				dynamic: {},
			}
		},
		mounted() {
			this.getDynamicDetail();
		},
		methods: {
			GoShare(){ 
				uni.setStorageSync('judouPoster',this.dynamicData.dynamic)
				this.$navigateTo('../share/share?type=dynamic')
			},
			checking() {
				if (this.loadingStatus == 'more') {
					this.loadingStatus = 'loading';
					this.getFirstList();
				}
			},
			getDynamicDetail() { 
				this.isCreator = this.dynamicData.isCreator;
				this.isFavorite = this.dynamicData.isPraise;
				this.isFollow = this.dynamicData.isFollow;
				this.dynamic = this.dynamicData.dynamic;
				this.praiseNum = this.dynamicData.dynamic.praiseQuantity;
				this.replyNum = this.dynamicData.dynamic.commentQuantity;
				this.getFirstList();
			},
			getFirstList() {
				var params = {
					dynamicId: this.id,
					pageable: {
						pageNumber: ++this.firstListPageNumber,
						pageSize: this.pageSize
					}
				}
				this.$common.ajax.postAjax({
					url: this.$common.url.api.commentList,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.firstList = this.firstList.concat(result.data.content);
							if (this.firstListPageNumber == result.data.totalPages || result.data.totalPages == 0) {
								this.loadingStatus = 'noMore';
							} else {
								this.loadingStatus = 'more';
							}
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			getReplyComment(commentId, index) {
				var content = [];
				var pageNumber = 0;
				if (this.secendList[index]) {
					content = this.secendList[index].content;
					pageNumber = this.secendList[index].pageNumber;
				} else {
					this.secendList[index] = {};
					this.secendList[index].content = [];
				}
				var params = {
					dynamicId: this.id,
					commentId: commentId,
					pageable: {
						pageNumber: ++pageNumber,
						pageSize: this.pageSize
					}
				}
				this.$common.ajax.postAjax({
					url: this.$common.url.api.commentList,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							content = content.concat(result.data.content);
							this.$set(this.secendList[index], "content", content);
							this.secendList[index].pageNumber = pageNumber;
						} else {
							this.$common.msg(result.msg);
						}
						this.$forceUpdate();
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			hiddenReplyComment(index) {
				this.secendList[index] = undefined;
				this.$forceUpdate();
			},
			submitComment() {
				if(!uni.getStorageSync("token")){
					this.$common.msg("登录后才能评论哦~");
					return;
				}
				if (!this.commentContent) {
					this.$common.msg("评论内容不能为空哦~");
					return;
				}
				var url = this.$common.url.api.addComment;
				var params = {
					id: this.id,
					content: this.commentContent
				}
				if (this.focusByReply) {
					url = this.$common.url.api.replyComment;
					params.id = this.replyItem.id;
				}
				var tempFlag = this.focusByReply;
				this.$common.ajax.postAjax({
					url: url,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.replyNum++;
							uni.$emit('updateDynamicAttribute',{index:this.index,isPraise:this.isFavorite,commentQuantity:this.replyNum})
							this.commentContent = '';
							if (tempFlag) {
								this.$common.msg("回复成功");
							} else {
								this.$common.msg("评论成功");
							}
							this.secendList = [];
							this.firstList = [];
							this.$forceUpdate();
							this.loadingStatus = 'loading';
							this.firstListPageNumber = 0;
							this.getFirstList();
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			clickedComment(item) {
				if (!this.inputIsFocus) {
					this.focusByReply = true;
					this.placeholder = `回复 ${item.member.eperAccount.eperUsername}`;
					this.replyItem = item;
				}
			},
			praised(item, index, cIndex) {
				if(!uni.getStorageSync("token")){
					this.$common.msg("登录后才能点赞哦~");
					return;
				}
				var params = {
					id: item.id
				};
				var url = item.isPraise ? this.$common.url.api.commentCancelPraise : this.$common.url.api.commentPraise;

				if (cIndex != undefined) {
					item.isPraise ? this.secendList[index].content[cIndex].praiseQuantity-- : this.secendList[index].content[cIndex].praiseQuantity++;
					this.secendList[index].content[cIndex].isPraise = !this.secendList[index].content[cIndex].isPraise;
				} else {
					item.isPraise ? this.firstList[index].praiseQuantity-- : this.firstList[index].praiseQuantity++;
					this.firstList[index].isPraise = !this.firstList[index].isPraise;
				}
				this.$forceUpdate();

				this.$common.ajax.postAjax({
					data: params,
					url: url,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							//nothing
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			dynamicPraised() {
				if(!uni.getStorageSync("token")){
					this.$common.msg("登录后才能点赞哦~");
					return;
				}
				this.isFavorite ? this.praiseNum-- : this.praiseNum++;
				uni.$emit('updateDynamicAttribute',{index:this.index,praiseQuantity:this.praiseNum,isPraise:!this.isFavorite})
				var params = {
					id: this.id
				};
				var url = this.isFavorite ? this.$common.url.api.dynamicCancelPraise : this.$common.url.api.dynamicPraise;;
				this.isFavorite = !this.isFavorite;
				this.$common.ajax.postAjax({
					url: url,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							//nothing
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})

			},
			isFocus() {
				this.inputIsFocus = true;
			},
			isBlur() {
				var that = this;
				setTimeout(function() {
					if (that.focusByReply) {
						that.focusByReply = false;
						that.placeholder = '';
						that.replyItem = {};
					}
					that.inputIsFocus = false;
				}, 200);
			}
		},
	}
</script>

<style scoped>
	@import url("./comment.css");
</style>
